<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="width: 200px"
      />
      <el-button type="primary" class="filter-item" style="margin-left: 10px" @click="open2">
        查询
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        class="filter-item"
        @click="open2"
      >
        重置
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        class="filter-item"
        @click="dialogVisible = true"
      >
        新增
      </el-button>
      <el-button type="primary" class="filter-item" @click="open2">
        <svg-icon icon-class="excel" style="margin-right: 5px" />
        导入
      </el-button>
      <el-button type="primary" class="filter-item" @click="open2">
        <svg-icon icon-class="excel" style="margin-right: 5px" />
        导出
      </el-button>
      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        class="filter-item"
        @click="delete1"
      >
        删除
      </el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="50" />
      <el-table-column fixed prop="date" label="来访日期" width="150" />
      <el-table-column prop="name" label="姓名" width="150" />
      <el-table-column prop="phone" label="手机号" width="150" />
      <el-table-column prop="address" label="家庭住址" width="300" />
      <el-table-column prop="temperature" label="体温" width="150" />
      <el-table-column prop="reason" label="来访事由" width="250" />
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="warning" size="small" @click="handleClick(scope.row)">查看</el-button>
          <el-button type="primary" size="small" @click="open2">编辑</el-button>
          <el-button type="danger" size="small" @click="open2">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {

  data() {
    return {
      input: '',
      tableData: [
        {
          date: '2020-11-11',
          name: '小李',
          phone: '18302642708',
          address: '四川省成都市西南石油大学',
          temperature: '36.5',
          reason: '谈合作'
        },
        {
          date: '2020-11-11',
          name: '小李',
          phone: '18302642708',
          address: '四川省成都市西南石油大学',
          temperature: '36.5',
          reason: '谈合作'
        },
        {
          date: '2020-11-11',
          name: '小李',
          phone: '18302642708',
          address: '四川省成都市西南石油大学',
          temperature: '36.5',
          reason: '谈合作'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    delete1() {
      this.$message('删除成功')
    },
    open2() {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
    }
  }
}
</script>
